<template>
    <div id="answerRecord">
    	<Table border :columns="recordCol" :data="showRecord"></Table>
	    <Page :total="recordTotal" :page-size="10" :page="page" 
			show-elevator
			show-total  style="text-align:center;margin-top:10px;" @on-change="changePage"/>
    	<Modal v-model="showExamDetail" width="1000" footer-hide class-name="vertical-center-modal" title="答题详情">
	      <exam-detail ref="examDetail" :UEInfo="curUEInfo" v-if="showExamDetail"></exam-detail>
	    </Modal>
    </div>
</template>
<script>
	import examDetail from './answerQuestionDetail'
	import {answerRecord} from '@/api/selfStudy/class.js'
	import {getExpQuestionAnswerDetail} from '@/api/selfStudy/courseExp.js'
    export default {
    	name:'answerRecord',
    	props:['classNumberId'],
        components:{examDetail},
        data () {
            return {
				recordList:[],
				recordTotal:0,
				page:1,
				pageSize:10,
				showExamDetail:false,
				recordCol:[//学员名称 课件名称 题目数量 答题数量 正确数量 详情进入查看这个学员的答题详情
					{ 
						title: '序号',
                        align: 'center',
						width:60,
						render:(h,params) => {
                        	let index = (this.page-1)*10 + params.row._index + 1
                        	return h('span',index)
                        }
					},
					{ 
						title:'学员昵称',
						key:'studentName'
					},
					{ 
						title:'课件名称',
						key:'ecName'
					},
					{ 
						title:'题目数量',
						key:'expQuestionNum'
					},
					{ 
						title:'答题数量',
						key:'expAnswerNum'
					},
					{ 
						title:'正确数量',
						key:'expAnswerOkNum'
					},
					{
			            title: '操作',
			            render: (h, params) => {
			              return h('div', [
			                h('Button', {
			                  props: {
			                    type: 'text',
			                    size: 'small',
			                    disabled:params.row.expQuestionNum == 0 || params.row.expAnswerNum == 0
			                  },
			                  style: {
			                  	    background: 'none',
					                border:'none',
					                boxShadow:'none'
			                  },
			                  on: {
			                    click: () => {
			                    	this.curUEInfo = params.row;
			                        this.showExamDetail = true;
			                    }
			                  }
			                }, [
			                	h('img', {
				                    attrs: {
				                        src: params.row.expQuestionNum == 0 || params.row.expAnswerNum == 0 ? require('../../../assets/globalIcon/dis-check.png') : require('../../../assets/globalIcon/check.png'),
				                    },
				                    style: {
				                        cursor: 'pointer',
				                        'margin-right':'5px',
				                        'vertical-align': 'middle',
				                        width:'16px',
				                        height:'16px',
				                        display:'inline-block',
				                    },
				                }),
				                h('span',{
				                    style: {
				                        cursor: 'pointer',
				                        color:params.row.expQuestionNum != 0 && params.row.expAnswerNum != 0 ? '#2d8cf0' : '#c5c8ce'
				                    },
				                },'答题详情')
			                ])
			              ])
			            },
			        }
				]
            }
        },
        computed:{
			showRecord(){
				return this.recordList.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
			}
        },
        watch:{
			classNumberId:function(val) {
				this.getAnswerRecord();
			}
        },
        filters:{

        },
        created(){

        },
        mounted(){
			this.getAnswerRecord();
        },
        methods:{
			getAnswerRecord(){
				answerRecord(this.classNumberId).then(data => {
					if(data.code == 1){
						this.recordList = data.data;
						this.recordTotal = this.recordList.length;
					}else{
						this.$Message.warning(data.message);
					}
				}).catch(error => {
					this.$Message.error(error.message);
				})
			},
			changePage(page){
				this.page = page;
			}
        }
    }
</script>
<style scoped>

</style>
